<template>
<!-- 直接复制二维表格，只是在改变表格的列，其他的都没有修改 -->
  <div class="total_customer_table">
    <el-table
       ref="table"
      :data="queryTableAllDataList"
      style="width: 100%"
      :cell-style="{ padding: 0, height: '30px' }"
      :header-cell-style="{
        background: '#f4f4f4',
        padding: 0,
        height: '40px',
      }"
      highlight-current-row
      show-summary
        :summary-method="getSummaries"
      :height="checkboxSelectValue ? '70vh' : '74vh'"
        
    >
  
      <!-- <el-table-column prop="warehouseNo" label="仓库编号" sortable width="100px"> </el-table-column> -->
      <!-- <el-table-column prop="customerName" label="客户简称" sortable width="100px"> </el-table-column> -->
      <el-table-column prop="typeNumber" label="款号" sortable width="130px">
      </el-table-column>
      <el-table-column prop="colorName" label="颜色" sortable width="100px">
      </el-table-column>
      <el-table-column prop="sellingPrice" label="售价" sortable> </el-table-column>
      <el-table-column prop="c05" label="05-XS" sortable> </el-table-column>
      <el-table-column prop="c07" label="07-S" sortable> </el-table-column>
      <el-table-column prop="c09" label="09-M" sortable> </el-table-column>
      <el-table-column prop="c11" label="11-L" sortable> </el-table-column>
      <el-table-column prop="c13" label="13-XL" sortable> </el-table-column>
      <el-table-column prop="c15" label="15-2L" sortable> </el-table-column>
      <el-table-column prop="c17" label="17-3L" sortable> </el-table-column>
      <el-table-column prop="c19" label="19-4L" sortable> </el-table-column>
      <el-table-column prop="c21" label="21-5L" sortable> </el-table-column>
      <el-table-column prop="c23" label="23-6L" sortable> </el-table-column>
      <el-table-column prop="f" label="D" sortable> </el-table-column>
      <el-table-column prop="totalSizeNum" label="总存" sortable> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    // 父组件传过来的table表格数组
    queryTableAllDataList: {
      type: Array,
      default() {
        return []
      }
    },
     // 父组件传过来的多条件查询，是否被点击
    checkboxSelectValue: {
      type: Boolean,
      default: false,
    },
    
  },
  data() {
    return {}
  },
  methods: {
 // 自定义合计行显示的数据
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        // if判断这里才是能指定合计中的每每一列显示什么内容
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (
          index === 1 ||
          index === 2 ||
          index === 3 ||
          index === 4 
        ) {
          sums[index] = "";
          return;
        }
        // if (index === 10) {
        //   sums[index] = "显示10 ";
        //   return;
        // }
        // if不指定，下面就会自动的操作数据并且合计了，不用手动操作
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // sums[index] += " 元";
          sums[index] += " ";
        } else {
          sums[index] = "0";
        }
      });

      return sums; // 会显示这个数组里面的各个Item,那么想要改变的话，直接改变里面的item值就行
    },
      // 表格的row（行）被单击的时候，触发的函数
    handleTableRowClick(row) {
      console.log(row);
      this.$emit("addImageUrlGiveTatherComponent", row.image, row.typeNumber);
    },
  },
   // 加了高度之后，合计不显示，这个时候，只能updata中重载
  updated() {
    this.$nextTick(() => {
      this.$refs["table"].doLayout();
    });
  }
  
}
</script>

<style lang="less" scoped>
.el-table{
overflow:visible !important;
}
</style>></style>
